<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>from-checked</title>
</head>
<body>
<div id="app">
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>

    <input type="radio" id="one" value="One" v-model="radioNames">
    <label for="one">One</label>
    <input type="radio" id="two" value="Two" v-model="radioNames">
    <label for="two">Two</label>
    <br>
    <span>Radio names: {{ radioNames }}</span>

    <select v-model="selected">
        <option value="" disabled>Please select</option>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    <br>
    <span>Current select: {{ selected }}</span>

    <br>
    <select v-model="selectOption">
        <option v-for="option in options" :value="option.text">{{ option.value }}</option>
    </select>
    <br>
    <span>Current select: {{ selectOption }}</span>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script type="text/javascript">
    new Vue ({
        el: '#app',
        data: {
            checkedNames: [],
            radioNames: '',
            selected: '',

            options: [
                {text: 'One', value: 'A'},
                {text: 'Two', value: 'B'},
                {text: 'Three', value: 'C'}
            ],
            selectOption: 'One',
        },
    });
</script>
</html>